<template>
	<view class="node-list">
		<view class="list">
			<view class="listtext" v-for='(item,index) in list' :key='index'>
				<text class="text" :class="{active:index==inActive}" @click="selection(index,item.name)">{{item.name}}</text>
			</view>
		</view>
		<view class="team-list">
			<view class="list2" v-for="(item,index) in nodelist" :key="index">
				<image class="image" :src="item.avatar | imgurl"></image>
				<view class="name">
					<text>{{item.nickname}}</text>
					<text>{{item.mobile}}</text>
				</view>
				<view class="number">
					<text>注册时间：</text>
					<text>{{item.createtime}}</text>
					<!-- <text>投资额度：{{item.money}}</text> -->
					<text>邀请人数：{{item.team_num}}人</text>
				</view>
			</view>
			<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
		</view>
	</view>
</template>
<script>
	import uniLoadMore from '../../components/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				list: [{
						'name': "一级节点"
					},
					{
						'name': "二级节点"
					},
					{
						'name': "三级节点"
					},
				],
				inActive: 0,
				nodelist: [],
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				page: 1,
				loadmore: false, //是否加载
			}
		},
		onLoad: function() {
			this.getData(this.page, 1)
		},
		methods: {
			selection(index, number) {
				this.nodelist = [];
				this.page = 1;
				this.inActive = index;
				this.getData(this.page, index + 1);
			},
			getData: function(page, level) {
				const _this = this;
				const data = {
					page: page,
					level: level
				}
				this.$request.post("/api/ucenter/getNodeList", {
						data: data
					})
					.then(res => {
						if (res.data.code == 1) {
							//循环遍历,将新数组追加到list数组中  
							for (let i = 0; i < res.data.data.length; i++) {
								_this.nodelist.push(res.data.data[i])
							}
							//如果数组长度不够10条就停止加载
							if (res.data.data.length < 10) {
								_this.loadmore = true;
							}
						}
					})
					.catch(error => {
						console.error('error:', error);
					});
			},
		},
		onReachBottom() { //上啦加载函数
			let _this = this;
			if (this.loadingType !== 0) {
				return;
			}
			this.page++;
			this.loadingType = 1;
			this.getData(this.page,this.inActive+1)
			setTimeout(() => {
				//如果数据已经加载完就停止加载.
				if (_this.loadmore) {
					this.loadingType = 2;
					return;
				}
				this.loadingType = 0;
			}, 1000);
		},
		filters: {
			imgurl(value) {
				value = 'http://www.huanqiuyt.com' + value
				return value
			},
			numFilter2(value) {
				// 截取当前数据到小数点后两位
				let realVal = Number(value).toFixed(1)
				// num.toFixed(2)获取的是字符串
				return Number(realVal)
			}
		}
	}
</script>

<style lang="less">
	.node-list {
		width: 100%;
		display: flex;
		flex-direction: column;

		.list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: flex-start;
			border-bottom: 5px solid #F1F1F1;


			.listtext {
				flex: 1;
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: center;

				.text {

					width: 70%;
					padding: 10upx 0;
					text-align: center;
					color: #24435D;
					font-size: 16px;

				}

				.active {
					background-color: #1D7BFF;
					color: #FFF;
				}
			}
		}

		.team-list {
			width: 100%;
			background-color: #FFFFFF;
			font-size: 12px;
			color: #24435D;

			.list2 {
				height: 90px;
				display: flex;
				border-bottom: 1px solid #F1F1F1;
				align-items: center;
				padding: 0 10px;
				justify-content: space-between;

				.image {
					width: 54px;
					height: 54px;
					border-radius: 50%;
				}

				.name {
					flex: 2;
					display: flex;
					flex-direction: column;
					padding-left: 10px;
				}

				.number {
					flex: 3;
					display: flex;
					flex-direction: column;
					font-size: 12px;
				}
			}
		}
	}
</style>
